<template>
  <view class="container">
    <!-- 顶部用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <u-avatar
          size="large"
          mode="circle"
          :src="userInfo.avater"
        ></u-avatar>
        <view class="user-detail">
          <text class="username">{{ userInfo.name }}</text>
          <view class="user-meta">
            <text class="meta-item">{{ userInfo.address }}</text>
            <text class="meta-item">{{ userInfo.sex }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <view 
        class="function-item" 
        v-for="item in list" 
        :key="item.text"
        @click="goToChildPage(item.src)"
      >
        <view class="item-left">
          <image :src="`/static/icons/${item.src}.png`" class="function-icon"></image>
          <text>{{ item.text }}</text>
        </view>
        <u-icon name="arrow-right" color="#999" size="28"></u-icon>
      </view>
    </view>

  </view>
</template>

<script lang="ts" setup>

import { useUsers } from '@/store/user'
const userInfo = useUsers().user
const list = [
  {
    text: '历史溯源',
    src: 'history'
  },
  {
    text: '收货地址',
    src: 'address'
  },
  {
    text: '我要反馈',
    src: 'feedback'
  },
  {
    text: '关于我们',
    src: 'about'
  }
]
function goToChildPage(e: any) {
  uni.navigateTo({
    url: '/pages/' + e + '/' + e
  })
}
function quit() {
  console.log(111)

  // userInfo.username = '未登录'
  // userInfo.address = ''
  // userInfo.sex = ''
  // userInfo.avaterSrc = ''
  // console.log(userInfo)
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.user-card {
  background: linear-gradient(to right, #63aa5d, #81c17a);
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4px 12px rgba(99, 170, 93, 0.2);
}

.user-info {
  display: flex;
  align-items: center;
}

.user-detail {
  flex: 1;
  margin-left: 30rpx;
}

.username {
  font-size: 40rpx;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12rpx;
  display: block;
}

.user-meta {
  display: flex;
  align-items: center;
}

.meta-item {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-right: 20rpx;
  background: rgba(255, 255, 255, 0.2);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.function-list {
  background-color: #fff;
  border-radius: 16rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.function-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 10rpx;
  border-bottom: 1px solid #f5f5f5;
}

.function-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
}

.function-icon {
  width: 44rpx;
  height: 44rpx;
  margin-right: 24rpx;
}

.item-left text {
  font-size: 30rpx;
  color: #333;
}

.quit-btn {
  margin-top: 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 28rpx 0;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.quit-btn text {
  font-size: 30rpx;
  color: #ff4d4f;
  font-weight: 500;
}

/* 点击效果 */
.function-item:active {
  background-color: #f9f9f9;
}

.quit-btn:active {
  opacity: 0.8;
}
</style>
